/* LESS Document */
@charset "utf-8";

// 在这里改颜色
@c0: #6495de; 

.cashier-page{
	position: relative;
	.cashier-container{
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	.flex-box{
		display: flex;
		align-items: center;
	}
	.top-banner{
		height: 160px;
		padding-top: 40px;
		background-image: url(../img/banner.png);
		background-position: center;
		color: #f1c6ac;
		.iconbox{
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #626996;
			line-height: 50px;
			text-align: center;
			margin-right: 10px;
			i{
				color: #FFFFFF;
				font-size: 28px;
			}
			flex-shrink: 0;
		}
		.title{
			font-size: 22px;
			font-weight: bold;
			flex-shrink: 0;
		}
		.countdown{
			padding: 10px 20px;
			border-radius: 20px;
			background-color: #ff4f4f;
			color: #FFFFFF;
			font-size: 14px;
			line-height: 16px;
			margin-right: 10px;
			i{
				color: #FFFFFF;
				font-size: 20px;
				line-height: 16px;
				margin-right: 6px;
			}
			flex-shrink: 0;
		}
		.explain{
			font-size: 14px;
			.text-oneline
		}
	}
	.cashier-box{
		.b-shadow;
		background-color: #FFFFFF;
		position: absolute;
		.be-h-center;
		top: 110px;
		border-radius: 16px;
		overflow: hidden;
		display: flex;
		.block-title{
			font-size: 18px;
			line-height: 18px;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30px;
		}
		.left{
			background-color: #f6f7f9;
			width: 420px;
			padding: 50px 20px 50px 60px;
			img{
				position: absolute;
				bottom: 0;
				left: 0;
			}
			.left-item{
				display: flex;
				align-self: center;
				font-size: 16px;
				line-height: 16px;
				margin-bottom: 30px;
				.item_name{
					color: #666666;
					margin-right: 30px;
					flex-shrink: 0;
					width: 80px;
					line-height: 1.5;
					.text-twoline;
				}
				.item_value{
					color: #333333;
					.text-twoline;
					line-height: 1.5;
				}
			}
		}
		.right{
			padding: 50px 60px;
			width: 580px;
			.row-pay{
				display: flex;
				justify-content: space-between;
				margin-top: 20px;
				.item{
					width: 220px;
					height: 86px;
					border-radius: 8px;
					border: 2px solid #f3f5f7;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					overflow: hidden;
				}
				.item.active, .item:hover{
					background-color: #f5f7f9;
					border-color: @c0;
					.trans
				}
				.item.active::after{
					content: '\e603';
					font-family: "iconfont" !important;
					font-size: 24px;
					font-style: normal;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					position: absolute;
					color: @c0;
					bottom: -7px;
					right: -1px;
				}
				.alipay{
					img{
						width: 131px
					}
				}
				.wechatpay, .transferpay{
					i{
						font-size: 40px;
						vertical-align: middle;
						color: #21bb1f;
					}
					span{
						font-size: 23px;
						line-height: 23px;
						vertical-align: middle;
						color: #394144;
						margin-left: 7px;
					}
				}
				.unionpay{
					img{
						width: 145px
					}
				}
				.transferpay{
					i{
						font-size: 35px;
						color: #ff8602;
					}
				}
			}
			.mt_100{
				margin-top: 100px;
			}
			.total-sum-box{
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				.total-sum{
					span{
						font-size: 16px;
						color: #333333;
					}
					b{
						color: #ff5b5b;
						font-size: 24px;
					}
					.unit{
						color: #ff5b5b;
						font-weight: bold;
					}
				}
				.button{
					width: 226px;
					height: 50px;
					background-color: @c0;
					border-radius: 8px;
					font-size: 18px;
					color: #FFFFFF;
					line-height: 50px;
					text-align: center;
					margin-top: 6px;
					cursor: pointer;
				}
				.button:hover{
					opacity: .8;
					.trans
				}
			}
			.details-pay{
				display: none;
				margin-top: 30px;
				background-color: #f5f7f9;
				border-radius: 4px;
				padding: 20px 30px;
				.text{
					text-align: center;
					font-size: 14px;
					color: #666666;
				}
				.box{
					margin-top: 10px;
					margin-bottom: 10px;
					border: 1px solid #373c5a;
					border-radius: 4px;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					.box_top{
						height: 30px;
						line-height: 30px;
						background-color: #373c5a;
						text-align: center;
						font-size: 16px;
						color: #FFFFFF;
						font-weight: normal;
						span{
							color: #ff6767;
						}
					}
					.box_bottom{
						flex-grow: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 20px;
						background-color: #FFFFFF;
						.detail-text{
							font-size: 17px;
							color: #333333;
							line-height: 30px;
						}
						.detail-qr{
							width: 120px;
							height: 120px;
							border-radius: 4px;
							border: 1px solid #f6f7f9;
							overflow: hidden;
							img{
								.img-fit-cover
							}
						}
					}
				}
			}
			.details-pay::before{
				content: '\e601';
				font-family: "iconfont" !important;
				font-size: 13px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				position: absolute;
				color: #f5f7f9;
				top: -15px;
			}
			.triangle_left::before{
				left: 95px;
			}
			.triangle_right::before{
				right: 95px;
			}
		}
	}
}





/*媒体查询--start--------------------------------------------------------*/
@media screen and  (max-width: 1600px){
	body{
		font: 16px/1.5 "Microsoft Yahei", Helvetica Neue, Helvetica, STHeiTi, sans-serif;
	}
}

@media screen and  (max-width: 1365px){
	body{
		min-width: 1024px;
		font: 14px/1.5 "Microsoft Yahei", Helvetica Neue, Helvetica, STHeiTi, sans-serif;
	}
}
/*媒体查询--end----------------------------------------------------------*/
/*复用样式--start--------------------------------------------------------*/
.b-b-1{border-bottom: 1px solid #CCCCCC;}

.be-center{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%)}
.be-h-center{position:absolute; left:50%; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%) }
.be-v-center{position:absolute; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%)}

.bg0{background:@c0}
.bg-white{background:#FFFFFF}

.b-shadow{box-shadow: 0 2px 16px 0 rgba(224, 224, 224, 0.2)}
.b-shadow_l{box-shadow: 0 9px 16px 0 rgba(67, 67, 67, 0.1)}
.b-shadow_c{box-shadow: 0 10px 23px 0 rgba(247, 117, 95, 0.4)}//主题色阴影
.b-shadow_c_l{box-shadow: 0 10px 23px 0 rgba(247, 117, 95, 0.2)}//主题色阴影
.b-shadow_grey{box-shadow: 0 10px 23px 0 rgba(159, 163, 184, 0.4)}


.br-4{border-radius:4px;}
.br-8{border-radius:8px;}
.br-16{border-radius:16px;}

.clear{clear:both}
.clearfix:after{content:""; display:block; clear:both}

.c0{color:@c0}

.c-3{color:#333333}
.c-6{color:#666666}
.c-9{color:#999999}
.c-ef{color:#EFEFEF}
.c-white{color:#FFFFFF}

.c-p{cursor:pointer}

.dis-b{display:block}
.dis-i{display:inline-block}

.f0{font-size:0}
.fl{float:left}
.fr{float:right}
.fw-b{font-weight: bold}

.hide{ display:none!important}

.img-fit-cover{height:100%; width:100%; object-fit:cover}
.img-fit-contain{height:100%; width:100%; object-fit:contain}

.line{width:100%; height:1px; background:#EFEFEF}
.line-through{text-decoration:line-through}

.mlr-auto{margin-left:auto; margin-right:auto}
.mt-40{margin-top: 40px;}
.mt-80{margin-top: 80px;}


.no-border{border: none!important}
.no-t-bottom{padding-top:0!important}
.no-p-bottom{padding-bottom:0!important}
.no-m-bottom{margin-bottom:0!important}
.no-m-top{margin-top:0!important}
.no-padding{padding:0!important}

.of-h-r{overflow:hidden; position:relative}
.opacity0{opacity:0}

.right-center{position:absolute; top:50%; transform:translateY(-50%); right:0}

.spacing{height:20px; background:#F4F4F4;}

.text-center{text-align:center}
.text-right{text-align:right}
.text-oneline{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.text-twoline{
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2
}
@-moz-document url-prefix() { 
	.text-twoline{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
	.text-twoline::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
		background: -webkit-linear-gradient(left, transparent, #fff 55%);
		background: -o-linear-gradient(right, transparent, #fff 55%);
		background: -moz-linear-gradient(right, transparent, #fff 55%);
		background: linear-gradient(to right, transparent, #fff 55%);
	}
}
@media screen and (~"min-width:0\0") {
    .text-twoline{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
	.text-twoline::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
		background: -webkit-linear-gradient(left, transparent, #fff 55%);
		background: -o-linear-gradient(right, transparent, #fff 55%);
		background: -moz-linear-gradient(right, transparent, #fff 55%);
		background: linear-gradient(to right, transparent, #fff 55%);
	}
	.top-color{
		display: none
	}
}
.text-line(@num:2){
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:@num
}

.trans{transition:all ease-in-out .2s}

.v-a-t{vertical-align:top}
.v-a-m{vertical-align:middle}
.vh100{height:100vh}

.w100{width: 100%;}

.z-999{z-index:999}
/*复用样式--end------------------------------------------------------*/
//加载时向上出现
.show-in-bottom-middle {
	-webkit-animation: show-in-bottom-middle 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
			animation: show-in-bottom-middle 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes show-in-bottom-middle {
  0% {
	-webkit-transform: translate(-50%, 30px);
			transform: translate(-50%, 30px);
  }
  100% {
	-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
  }
}
@keyframes show-in-bottom-middle {
  0% {
	-webkit-transform: translate(-50%, 30px);
			transform: translate(-50%, 30px);
  }
  100% {
	-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
  }
}